@extends('layouts.back_stage')
@section('style')
    @parent
    <style>
        .address {
            border-color: #cfdadd;
            border-radius: 2px;
            width: 45%;
            height: 30px;
            padding: 6px 10px;
            font-size: 12px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #cfdadd;
            box-shadow: none;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        .form-control{font-size:12px;}
    </style>
@endsection
@section('content')
    <div class="container">
        <meta name="csrf_token" id="token" content="{{ csrf_token() }}">
        <div style="padding:20px 0;">
            <h3>虚拟区列表</h3>
        </div>
        <div class="pull-left" style="width: 100%;margin-bottom: 20px">
            <form action="" role="form" style="display: inline-block;margin-right: 10px">
                @if($self_company_id == 1)
                <label>选择公司：</label>
                <select name="company_id" id="sort" class="address" style="width: 185px">
                    <option value="{{ $company_id }}">{{ $companys[$company_id] }}</option>
                    @foreach($companys as $k=>$v)
                    <option value="{{ $k }}">{{ $v }}</option>
                    @endforeach
                </select>
                @endif
                <label>虚拟区名：</label>
                <input type="text"  placeholder="请输入虚拟区名" class="form-control user_name" style="width: 150px;display: inline-block;" value="" name="user_name">
                <button type="submit" class="btn btn-info" id="sort_btn" style="margin-bottom: 5px;">搜索</button>
            </form>
            <a class="btn btn-primary" style="float: right;margin-right:70px" data-toggle="modal" data-target="#myModal" onclick="addArea()">添加虚拟区</a>
        </div>
        <table class="table">
            <thead>
                <tr><th>编号</th><th>地级市</th><th>虚拟区</th><th>&nbsp;&nbsp;&nbsp;&nbsp;操作</th></tr>
            </thead>
            <tbody>
            @if(isset($virtuals) && count($virtuals) > 0)
                @foreach($virtuals as $k=>$v)
                    <?php
                    if(!isset($_GET['page'])) {
                        $page = 1 ;
                    }else{
                        $page = $_GET['page'];
                    }
                    ?>
                <tr id="delete_{{ $v->id }}">
                    <td class="areaId">{{ ($page-1)*10+$k+1 }}</td>
                    <td>{{ $v->area_name }}</td>
                    <td class="areaName">{{ $v->name }}</td>
                    <td>
                        <a href="/company/getVirtualAreaUsers?id={{ $v->id }}&company_id={{ $v->company_id }}" >查看</a>
                        <a href="javascript:;" data-toggle="modal" data-target="#myModal" class="btn_edit" onclick="amendArea('{{ $v->id }}','{{ $v->name }}','{{ $v->company_id }}','{{$companys[$v->company_id]  }}')">编辑</a>
                        <input type="hidden" class="id" value="">
                        <a href="javascript:;" onclick="deleteCompany({{ $v->id }})" id="delete">删除</a>
                    </td>
                </tr>
                @endforeach
            @endif
            </tbody>

        </table>
        <div style="float: right">{{ $virtuals->appends(['company_id'=>$company_id,'user_name'=>$name])->links() }}</div>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title add_virtual" id="myModalLabel">添加虚拟区</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container" style="width:100%;">
                            <div class="row">
                                <div style="width:80%;margin:0 auto;">
                                    @if($self_company_id == 1)
                                    <select class="address company_area">
                                        <option class="area_class" value="">请选择公司</option>
                                        @foreach($companys as $k=>$v)
                                            <option class="area_class" value="{{ $k }}">{{ $v }}</option>
                                        @endforeach
                                    </select>
                                    @else
                                        <input type="hidden" class="company_area" value="{{ $self_company_id }}">
                                    @endif
                                    <input type="hidden" class="id" value="">
                                    <div style="margin-top:40px;">
                                        <select name="web_select" id="web_select" class="web_select province address" >
                                            <option class="province_class" value="">省</option>
                                            @foreach ($data as $area)
                                                <option class="province_class" value="{{ $area->area_bh }}">{{ $area->area_name }}</option>
                                            @endforeach
                                        </select>
                                        <select name="web_select1" id="web_select1" class="web_select city address">
                                            <option class="city_class" value="">市</option>
                                        </select>
                                    </div>
                                    <input class="form-control name_area" style="margin-top:40px;width:250px" type="text" maxlength="10" placeholder="请添加虚拟区名称"><br>
                                    <button type='button' class='btn btn-success addVirtual' style="margin-left:350px;margin-top:20px;">添加</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        /*点击添加按钮*/
        function addArea(){
            $(".btn-success").addClass("sure1").removeClass("sure2");
            $(".add_virtual").text("");
            $(".addVirtual").text("");
            $(".add_virtual").text("添加虚拟区");
            $(".addVirtual").text("添加");
        }
        //点击确定按钮
        $(document).on("click",".sure1",function(){
            var company_area = $('.company_area').val();
            var name= $('.name_area').val();
            var area_code=$('.city').val();
            if ($('.company_area').val() == '') {
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请选择公司");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            if ($('.name_area').val()=='') {
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请添加虚拟区名称");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            if ($('.city').val()=='') {
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请选择省市");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                type: 'post',
                url: '/company/createVirtual',
                dataType:'json',
                data: {'company_id':company_area,'name':name,'area_code':area_code},
                success: function (data) {
                    if(data.success){
                        $(".faceImg").attr("src","/img/laugh.png");
                        $(".oHandle").text("添加成功");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                        window.location.reload();
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            });
        });
        /*删除*/
        function deleteCompany(id){
            $(".oText").text("确定要删除吗？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc",id);
            $(".oBtn0").attr('id','');
            $(".oBtn0").attr('id','oDelete');
        }
        /*点确定*/
        $(document).on('click','#oDelete',function(){
            $(".oMask").hide();
            $(".oAnim").hide();
            var id=$(this).attr("abc");
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                type:'post',
                url:'/company/deleteVirtual',
                data:{'id':id},
                dataType:'json',
                success:function (data) {
                    $(".faceImg").attr("src","/img/laugh.png");
                    $(".oHandle").text("删除成功");
                    $(".oSuccess").show(0).delay(1000).hide(0);
                    window.location.reload();
                }
            });
        });
        /*点击编辑按钮*/
        function amendArea(id){
            $(".btn-success").addClass("sure2").removeClass("sure1");
            $(".add_virtual").text("");
            $(".addVirtual").text("");
            $(".add_virtual").text("编辑虚拟区");
            $(".addVirtual").text("保存");
            var self_company_id = '{{ $self_company_id }}';
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                type: 'post',
                url: '/company/getVirtualInfo',
                dataType:'json',
                data: {'id':id},
                success: function (data) {
                    if(data.success){
                        var info1=data.data;
                        var info2=data.area;
                        var info3=info2.area_code1;
                        var info4=info2.area_code2;
                        console.log(info2);
                        $(".name_area").val(info1.name);
                        $('.id').val(info1.id);
                        if(self_company_id  == 1){
                            $('.area_class').eq(0).remove();
                            $('.company_area').prepend("<option class='area_class' value="+info1.company_id+" selected>"+info1.company_name+"</option>");
                        }else{
                            $('.company_area').val(info1.company_id);
                        }
                        if(info3!=null) {
                            $('.province_class').eq(0).remove();
                            $('.province').prepend("<option class='province_class' value=" + info3.area_bh + " selected>" + info3.area_name + "</option>");
                        }else{
                            $('.province_class').eq(0).remove();
                            $('.province').prepend("<option class='province_class' value='' selected>省</option>");
                        }
                        if(info4!=null) {
                            $('.city_class').eq(0).remove();
                            $('.city').prepend("<option class='city_class' value=" + info4.area_bh + " selected>" + info4.area_name + "</option>");
                        }else{
                            $('.city_class').eq(0).remove();
                            $('.city').prepend("<option class='city_class' value='' selected>市</option>");
                        }
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            });
        }
        $(document).on("click",".sure2",function(){
            var id=$(".id").val();
            var company_area = $('.company_area').val();
            var name= $('.name_area').val();
            var area_code=$('.city').val();
            if ($('.company_area').val() == '') {
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请选择公司");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            if ($('.city').val()=='') {
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请选择省市");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            if ($('.name_area').val()=='') {
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请添加虚拟区名称");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                type: 'post',
                url: '/company/VirtualAreasUpdate',
                dataType:'json',
                data: {'id':id,'company_id':company_area,'name':name,'area_code':area_code},
                success: function (data) {
                    if(data.success){
                        $(".faceImg").attr("src","/img/laugh.png");
                        $(".oHandle").text("保存成功");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                        window.location.reload();
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        })
    </script>
@endsection